<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-22 22:59:49
 * @LastEditors: yyh
 * @LastEditTime: 2022-04-09 03:08:07
-->

<template>
  <div>
    <!-- 用户头像 -->
    <div class="userInfoHeader" style="display: flex">
      <div style="width: 82px; margin-left: 300px" class="img--circle">
        <div class="block">
          <el-avatar :size="100" :src="circleUrl" />
        </div>
      </div>
      <div style="width: 82px; margin-left: 220px; position: relative">
        <div style="position: absolute; bottom: 0; left: 50">
          <el-button size="small" type="primary" @click="touVisible = true"
            >修改个人头像</el-button
          >
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider />
    <!-- 个人信息详情 -->
    <div class="xiangqing">
      <div>用户名: {{ userInfo.name }}</div>
      <div>真实姓名: {{ userInfo.realName }}</div>
      <div>角色: {{ userInfo.role }}</div>
      <div>性别：{{ userInfo.gender }}</div>
      <div>职位：{{ userInfo.position }}</div>
      <div>电话号码：{{ userInfo.telephone }}</div>
      <div>邮箱：{{ userInfo.email }}</div>
    </div>
    <div style="display: flex">
      <div style="width: 82px; margin: 0 auto; position: relative">
        <div style="position: absolute; bottom: 0">
          <el-button @click="toEdit" size="small" type="primary"
            >修改个人信息</el-button
          >
        </div>
      </div>
    </div>
    <el-divider />
    <!-- 修改个人信息模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-width="formLabelWidth"
        >
          <el-form-item prop="name" label="用户名">
            <el-input size="small" v-model="form.name" clearable />
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input
              show-password
              size="small"
              v-model="form.password"
              clearable
            />
          </el-form-item>
          <el-form-item prop="realName" label="真实姓名">
            <el-input size="small" v-model="form.realName" clearable />
          </el-form-item>
          <el-form-item prop="role" label="角色">
            <el-select
              v-model="form.role"
              size="small"
              clearable
              placeholder="角色"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="gender" label="性别">
            <el-select
              v-model="form.gender"
              size="small"
              clearable
              placeholder="性别"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="position" label="职位">
            <el-input size="small" v-model="form.position" clearable />
          </el-form-item>
          <el-form-item prop="telephone" label="电话号码">
            <el-input size="small" v-model="form.telephone" clearable />
          </el-form-item>
          <el-form-item prop="email" label="个人邮箱">
            <el-input size="small" v-model="form.email" clearable />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改头像模态框 -->
    <div>
      <el-dialog title="更改头像" :visible.sync="touVisible" @close="toclose">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :data="insertProgram"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>

        <div slot="footer" class="dialog-footer">
          <el-button @click="touVisible = false">取 消</el-button>
          <el-button type="primary" @click="check">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { uploadFileURL } from "../utils/config";
export default {
  data() {
    return {
      userInfo: {},
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "管理员",
          label: "管理员",
        },
      ],
      options1: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      value: "",
      //表单验证
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入个人邮箱", trigger: "blur" }],
      },
      // 表单数据
      form: {
        id: "",
        name: "",
        password: "",
        realName: "",
        role: "",
        gender: "",
        position: "",
        telephone: "",
        email: "",
      },
      uploadFileURL,
      insertProgram: {
        id: sessionStorage.getItem("id")
      },
      // 修改头像模态框
      touVisible: false,
      // 准备上传的头像地址
      imageUrl: "",
      // 用户本身自己的头像
      circleUrl:"",
      // 模态框标题
      title: "",
      // 模态框的显示与隐藏
      visible: false, //隐藏
      // 表单
      formLabelWidth: "100px",
    };
  },
  created() {
    this.getUserInfoById();
  },
  methods: {
    //获取用户数据
    async getUserInfoById() {
      let res = await this.$http.get("users/getUserInfoById", {
        params: sessionStorage.getItem("id"),
      });
      this.userInfo = res.data.data[0];
      this.circleUrl = this.userInfo.img;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //修改个人头像模态框确定按钮事件处理程序
    check(){
      this.touVisible = false
    },
    // 重置表单
    toclose() {
      this.imageUrl = "";
      this.getUserInfoById();
    },
    // 编辑按钮事件处理程序
    toEdit() {
      // this.queryCategoryData();
      // 设置表单数据
      this.form = this.userInfo;
      this.title = "修改个人信息";
      this.visible = true;
    },
    //修改个人信息模态框确定按钮事件处理程序
    toSave() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$http.post("users/updateUserInfo", this.form);
          // 提示用户保存成功，刷新表格数据，关闭模态框
          this.$notify.success({
            title: "编辑成功",
            message: res.message,
          });
          this.visible = false;
          this.getUserInfoById();
        } else {
          // 校验不通过
          return false;
        }
      });
    },
    // 关闭模态框
    toClose() {
      // 重置表单验证
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style>
.xiangqing > div {
  height: 55px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>